解構賦值是ES6的新特性之一，用於提取陣列或物件中的資料，這是一種對原本語法在使用上的改進。在使用時有以下幾種常見的情況:

陣列解構賦值

用來賦值的等號左邊寫變數或是常數，右邊要寫上對應的數值
看了幾篇文章有人這麼說*:就像鏡子般的對應，當沒有對應的值時，就會得到undefined。*

以前的用法VS語結構賦值

let ary = [1,2,3,4,5]

//之前取值的方法
 let a = ary[0] 
 let b = ary[1]
 
// 利用解構的方式可以一次宣告好幾個參數
 let [a,b,...c] = ary
 console.log(a,b,c); //  1,2[3,4,5]

基本用法與其他用法

//基本用法
const [a,b] = [1,2]  //a=1,b=2

//先宣告後指定值
let a,b
[a,b] = [1,2]

//略過某些值
const [a,,b] = [1,2,3] //a=1,b=3

// 字串
const str = "hello";
const [a, b, c, d, e] = str
console.log(a,b,c,d,e) //h,e,l,l,o

// 其餘運算
const [a, ...b] = [1, 2, 3] //a=1, b=[2,3]

//undefined
const [, , , a, b] = [1, 2, 3] // a=undefined, b=undefined

物件解構賦值

實際範例

let data = {
    name: 'joyce',
    height: '180',
    sex: 'female'
}

let {name,height,sex} = data //把data的name、height、sex直接拔出來用

基本用法與其他用法

//基本用法
const { id:x } = {id:1} //x=1

//undefined
const { id:x } = {ids:5} //x=undefined

//屬性賦值
const { data1:data1,data2:data2 } = { data1:100,data2:200 } //data1=100,data2=200

//屬性賦值的簡短語法
const { data1,data2 } = { data1:100,data2:200 }
//const {data1} 等於 const{data1:data1}

寫React時也滿常用到

//像是將傳入元件的props做解構
const {id,item,data} = this.props

//如果沒有解構的話就會變成這樣使用
this.props.id
this.props.item
this.props.data